<template>
	<view class="container">
		<navbar title="我的优惠券"></navbar>
		<view class="tab-con">
			<view class="tab-item line-center" v-for="(item,index) in tab" :key="index"
				:class="[tabType == item.type ? 'tab-item-act':'']" @tap='switchTab(item.type)'>{{item.name}}</view>
		</view>
		<view v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<view v-if='showData'>
				<template v-if='list.length > 0'>
					<view class="coupon-wrap">
						<view class="coupon-item" v-for="(item,index) in list" :key="index"
							:class="[item.is_flag ? 'coupon-item-mb':'']">
							<view class="coupon-img">
								<image src='../static/coupon-bg1.png' v-if='tabType == "isUsable"'></image>
								<image src='../static/coupon-bg2.png' v-else></image>
								<view class="coupon-item-con">
									<view class="coupon-item-left"
										:class="[tabType != 'isUsable' ? 'coupon-item-left-used':'']">
										<view>{{item.reduce_price}}<text>元</text></view>
									</view>
									<view class="coupon-item-right">
										<view class="top">
											<view class="title" :class="[tabType != 'isUsable' ? 'title-used':'']">{{item.name}}
											</view>
											<view class="tip" :class="[tabType != 'isUsable' ? 'title-used':'']">满{{item.min_price}}元可以用
											</view>
											<view class="tip" :class="[tabType != 'isUsable' ? 'title-used':'']">{{item.start_time}}-{{item.end_time}}</view>
											<view class="use line-center" v-if='tabType == "isUsable"' @tap="toHome">去使用
											</view>
											<view class="used" v-if='tabType == "isUse"'>
												<image src='../static/yishiyong.png'></image>
											</view>
											<view class="used" v-if='tabType == "isExpire"'>
												<image src='../static/yishixiao.png'></image>
											</view>
										</view>
										<view class="rules line-v-center">
											<text :class="[item.is_flag ? 'op':'']"
												v-if='tabType == "isUsable"'>使用规则</text>
											<text :class="[item.is_flag ? 'op':'']" v-else
												class="title-used">使用规则</text>
											<view class="circle" @tap='watchRules(index)'>
												<image src='../static/down.png' v-if='!item.is_flag'></image>
												<image src='../static/up.png' v-else></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="rules-wrap" :class="[item.is_flag ? 'rules-wrap-show':'']">
								<view class="title">使用规则</view>
								<view class="p">· 下单满{{item.min_price}}元可用;</view>
								<view class="p">· 有效期内只可使用一次;</view>
								<view class="p">· 一笔订单只能使用一次优惠，且不与其他优惠同享</view>
							</view>
						</view>
					</view>
					<loading :loadEnd='loadEnd'></loading>
				</template>
				<view v-else>
					<no-data></no-data>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tab: [{
						type: 'isUsable',
						name: '未使用(0)'
					},
					{
						type: 'isUse',
						name: '已使用(0)'
					},
					{
						type: 'isExpire',
						name: '已失效(0)'
					},
				],
				tabType: 'isUsable',
				list: [],
				page: 1,
				totalPage: '',
				loadEnd: false,
				loadingPage: true,
				showData:false,
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getList()
			} else {
				return;
			}
		},
		onPullDownRefresh() {
			this.reload()
			uni.stopPullDownRefresh()
		},
		methods: {
			switchTab(type) {
				if (this.tabType === type) {
					return;
				}
				this.tabType = type;
				this.reload()
			},
			reload(){
				this.list = [];
				this.page = 1;
				this.totalPage = '';
				this.loadEnd = false;
				this.showData = false;
				this.getList()
			},
			getList() {
				app.globalRequest({
					api: app.getApi().coupon.userCouponList,
					data: {
						dataType: this.tabType,
						page: this.page,
						limits: 15
					}
				}).then(res => {
					this.loadingPage = false;
					this.showData = true;
					if (res.code == 0) {
						res.data.list.data.forEach(v => {
							v.reduce_price = parseInt(v.reduce_price);
							v.is_flag = false;
						})
						this.list = this.list.concat(res.data.list.data);
						this.totalPage = res.data.list.last_page;
						this.tab[0].name = `未使用(${res.data.tabNum.isUsableNum})`;
						this.tab[1].name = `已使用(${res.data.tabNum.isUseNum})`;
						this.tab[2].name = `已失效(${res.data.tabNum.isExpireNum})`;
						if (this.totalPage == this.page) {
							this.loadEnd = true;
						}
					}
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/tab-page/index/index'
				})
			},
			watchRules(index) {
				// this.isFlag = !this.isFlag
				const list = this.list;
				list[index].is_flag = !list[index].is_flag;
				this.list = list;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-con {
		width: 100%;
		height: 88rpx;
		background: $supplier-page-color;
		position: fixed;
		left: 0;
		z-index: 222;
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		.tab-item {
			position: relative;
			z-index: 1;
		}

		.tab-item-act {

			&::after {
				content: '';
				width: 104rpx;
				height: 8rpx;
				background: linear-gradient(90deg, #FF5040 0%, rgba(255, 255, 255, 0.31) 100%);
				border-radius: 8rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 30rpx;
				z-index: -1;
			}
		}
	}

	.wrap {
		padding-top: 88rpx;
		padding-bottom: 80rpx;
	}

	.coupon-item {
		width: 700rpx;
		margin: 0 auto 48rpx;

		.coupon-img {
			width: 100%;
			height: 220rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.coupon-item-con {
				width: 100%;
				height: 100%;
				// background: red;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;

				.coupon-item-left {
					width: 220rpx;
					text-align: center;
					font-family: 'DIN-BOLD';
					font-size: 72rpx;
					color: #F73A07;

					text {
						font-size: 28rpx;
						color: #FF4819;
						padding-left: 2rpx;
					}
				}

				.coupon-item-left-used {
					color: #fff;

					text {
						color: #fff;
					}
				}

				.coupon-item-right {
					flex: 1;
					margin: 0 24rpx 0 18rpx;
					box-sizing: border-box;

					.top {
						border-bottom: 2rpx dotted #DEDBDB;
						padding-bottom: 14rpx;
						position: relative;

						.title {
							font-weight: bold;
							font-size: 32rpx;
							color: #060201;
							line-height: 48rpx;
						}

						.tip {
							font-size: 24rpx;
							color: #DEDBDB;
							padding-top: 6rpx;
						}

						.use {
							width: 124rpx;
							height: 50rpx;
							background: #FF1C03;
							border-radius: 26rpx;
							color: #fff;
							position: absolute;
							right: 0;
							top: 50rpx;
						}

						.used {
							width: 66rpx;
							height: 66rpx;
							position: absolute;
							right: 0;
							top: 22rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

					}

					.rules {
						justify-content: space-between;
						font-size: 24rpx;
						color: #DEDBDB;
						padding-top: 10rpx;

						.circle {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
			}

			.is-new {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 0;
				top: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.rules-wrap {
			width: 100%;
			height: 0rpx;
			background: #FFFFFF;
			overflow: hidden;
			margin-top: -20rpx;
			position: relative;
			z-index: 2;
			padding: 0 16rpx;
			box-sizing: border-box;
			transition: all 0.2s ease;
			opacity: 0;

			.title {
				font-size: 24rpx;
				color: #DEDBDB;
				line-height: 48rpx;
			}

			.p {
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}

		.rules-wrap-show {
			height: 176rpx;
			opacity: 1;
		}

		.op {
			opacity: 0;
		}
	}

	.coupon-item-mb {
		margin: 0 auto 24rpx;
	}

	.title-used {
		color: #B4B5BF !important;
	}
</style>